<template>
  <div class="user-tree">
    <div class="user-box">
      <!--
      <div class="user-box_avatar">
        <el-avatar :size="50" :src="data.avatarUrl"></el-avatar>
      </div>-->
      <div class="user-box_action">
        <el-dropdown @command="handleCommand">
          <el-button type="primary" size="medium" icon="el-icon-circle-plus">
            新建<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-s-platform" :command="{ flag: 'add', value: {} }">新建连接</el-dropdown-item>
            <el-dropdown-item icon="el-icon-folder-opened" :command="{ flag: 'add-folder', value: {} }">新建分组</el-dropdown-item>
            <el-dropdown-item icon="el-icon-setting" :command="{ flag: 'set', value: {} }">设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="tree-box">
      <el-scrollbar class="tree-box_scroll">
        <!--<div v-if="!data.treeData.length || (data.treeData.length === 1 && ~~data.treeData[0].type === 1)" class="add-btn" @click="handleBtnAddFn({flag: !data.treeData.length || (data.treeData.length === 1 && ~~data.treeData[0].type === 1) ? 'add-folder' : 'add', value: {}})"><el-button icon="el-icon-plus" type="primary" plain>新建</el-button></div>-->
        <el-tree
          v-loading="data.loadings.loading"
          :props="data.defaultProps"
          :accordion="false"
          default-expand-all
          :data="data.treeData"
          node-key="id"
          ref="treeRef"
          @node-click="handleNodeClick"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span class="custom-tree-node_icon">
              <i :class="['icon-color', ~~data.type === 0 ? 'el-icon-folder' : 'el-icon-s-platform blue']" ></i>
            </span>
            <span
              class="custom-tree-node-label"
              :title="node.label"
              >{{ node.label }}</span
            >
            <el-dropdown
              @command="handleCommand"
              size="medium"
              v-if="~~data.type === 0"
            >
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template>
                  <!--
                  <el-dropdown-item
                    :command="{ flag: 'add-folder', value: node }"
                    >
                    <i class='el-icon-folder-add'></i>
                    新建分组
                    </el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="{ flag: 'add', value: node }"
                    >
                    <i class='el-icon-circle-plus-outline'></i>
                    新建连接
                    </el-dropdown-item
                  >-->
                  <el-dropdown-item
                    :command="{ flag: 'edit-folder', value: node }"
                    >
                    <i class='el-icon-edit-outline' style="color:#13ce66"></i>
                    编辑
                    </el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="{ flag: 'delete-folder', value: node }"
                    >
                    <i class='el-icon-folder-remove' style="color:red"></i>
                    删除
                    </el-dropdown-item
                  >
                </template>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown
              @command="handleCommand"
              size="medium"
              placement="bottom-end"
              v-else
            >
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template>
                  <el-dropdown-item
                    :command="{ flag: 'shell', value: node }"
                    >
                    <i class='el-icon-full-screen' style="color:#303133"></i>
                    终端</el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="{ flag: 'file', value: node }"
                    >
                    <i class='el-icon-set-up' style="color:#1890ff"></i>
                    文件</el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="{ flag: 'overview', value: node }"
                    >
                    <i class='el-icon-data-line' style="color:#ffba00"></i>
                    监控</el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="{ flag: 'edit', value: node }"
                    >
                    <i class='el-icon-edit-outline' style="color:#13ce66"></i>
                    编辑</el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="{ flag: 'delete', value: node }"
                    >
                    <i class='el-icon-delete' style="color:red"></i>
                    删除</el-dropdown-item
                  >
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-tree>
      </el-scrollbar>
    </div>
    <!-- 机器连接数量 -->
    <div style="width: 100%;height:100px;text-align: center;">
      <el-progress type="circle"
      :percentage="data.computerRate" :width="90" :stroke-width="8" :format="formatProgress()"></el-progress>
      <!--<el-tag type="success">机器数：8</el-tag><el-image style="width: 100%;height:100px;" :src="require('@/assets/image/login-background.jpg')"></el-image>-->
    </div>
    <!-- 新增编辑分组 -->
    <addEditFolder-Dialog
      @updateList="refreshNodeById"
      ref="addEditFolderDialog"
    ></addEditFolder-Dialog>
    <!-- 新增编辑机器 -->
    <addEdit-Dialog
      @updateList="refreshNodeById"
      ref="addEditDialog"
    ></addEdit-Dialog>

    <!-- 设置 -->
    <set-Dialog
      @updateList="refreshNodeById"
      ref="setDialog"
    ></set-Dialog>
  </div>
</template>

<script>
import AddEditDialog from './components/AddEditDialog'
import AddEditFolderDialog from './components/AddEditFolderDialog'
import SetDialog from './components/SetDialog'

import * as apis from '@/api/fairyshell'

  export default {
    components:{AddEditFolderDialog,AddEditDialog,SetDialog},
    data() {
      return {
        data: {
          avatarUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          treeData: [],
          folderData:{},
          computerNum:0,//机器数量
          computerRate:0,//百分比
          defaultProps: {
            children: 'children',
            label: 'name',
            isLeaf: 'leaf'
          },
          loadings: {
            loading: false
          },

        },
        n :{
            count: 0,
            prev: null,
            timer: null
          }

      }

    },
    mounted() {
      this.init()
    },
    methods:{

      init () {
        this.data.loadings.loading = true
        apis.findTree({}).then(res => {
          this.data.treeData = res.data && res.data.length ? res.data : []
          this.data.folderData=res.data.filter(item=>~~item.type === 0);
          this.data.computerNum=res.data.filter(item=>~~item.type === 1).length;
        }).finally(() => {
          this.data.loadings.loading = false
        })
      },
      handleNodeClick(data) {
        if(~~data.type === 1){
          // 双击
          const dbClicks = (data, id, cb) => {
            this.n.count++
            if ((this.n.prev === data[id]) && this.n.count >= 2) {
              cb()
            }
            this.n.prev = data[id]

            this.n.timer = setTimeout(() => {
              this.n.count = 0
              this.n.prev = null
            }, 300)
          }
          dbClicks(data, 'id', () => {
              this.$emit('handleNodeClick',{...data,tabtype: 'shell'})
          })
        }
      },
      handleBtnAddFn (data) {
        this.$refs.addEditFolderDialog.init(data)
      },
      refreshNodeById(data) {
        // 当前选中新增载体父级
        console.log(data)
        // 目前暂时全刷新
        this.init()
      },
      handleCommand(data) {
        // 弹窗操作
        switch (data.flag) {
          // 新建分组
          case 'add-folder':
            this.$refs.addEditFolderDialog.init(data)
            break
          // 编辑分组
          case 'edit-folder':
            this.$refs.addEditFolderDialog.init(data)
            break
          // 删除分组
          case 'delete-folder':
            this.deleteFn(data)
            break
          // 新建连接
          case 'add':
            const data2 = {...data,folderData: this.data.folderData}
            this.$refs.addEditDialog.init(data2)
            break
          // 编辑连接
          case 'edit':
            const data3 = {...data,folderData: this.data.folderData}
            this.$refs.addEditDialog.init(data3)
            break
          // 删除连接
          case 'delete':
            this.deleteFn(data)
            break
            // 终端连接
          case 'shell':
            if(data.value.data.type === 1){
              this.$emit('handleNodeClick',{...data.value.data,tabtype: 'shell'})
            }
            break
            // 文件
          case 'file':
            this.$emit('handleNodeClick',{...data.value.data,tabtype: 'file'})
            break
            // 监控
          case 'overview':
            this.$emit('handleNodeClick',{...data.value.data,tabtype: 'overview'})
            break
             // 设置
          case 'set':
            this.$refs.setDialog.init(data)
            break
        }
      },
      // 执行删除分组
      deleteFn(data) {
        this.$confirm(`是否确认删除?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        })
          .then(() => {
            apis
              .deleteById({ id: data.value.data.id })
              .then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // 树形目录列表中根据该删除节点找到上级节点node进行刷新其下面的子点
                this.refreshNodeById(data.value.data)
              })
              .catch(res => {
                this.$notify.error({
                  title: '删除失败',
                  message: (res.data && res.data.mesg) || res.mesg
                })
              })
              .finally(() => {})
          })
          .catch(() => {})
          .finally(() => {})
      },
      formatProgress(){
        this.data.computerRate=(this.data.computerNum/5)*100
        return () => {
          return '机器数：'+this.data.computerNum
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.user-tree{
  width:100%;
  height: 100%;
  .user-box{
    width:100%;
    padding:20px 0 10px 0;
    height: 120px;
    &_avatar{
      display: flex;
      justify-content: center;
      padding:0 0 15px 0;
    }
    &_action{
      display: flex;
      justify-content: center;
    }
  }

  /* 定义滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f2f2f2;
}

::-webkit-scrollbar-thumb {
  background-color: #cfcfcf;
  border-radius: 5px;
  width: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* 定义滚动条的样式结束 */
  .info-action{
    width:100%;
    height:35px;
    line-height: 35px;
    padding:0 20px;
    background-color: #7AA5F5;
    color:#fff;
    position: relative;
    .drop{
      position: absolute;
      right:10px;
      top:50%;
      transform: translate(0, -50%);
      .el-dropdown-link{
        color:#fff;
      }
    }
  }
  .tree-box{
    height: calc(100% - 220px);
    .add-btn{
      width:100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: center;
      margin-top:20px;
    }
    &_scroll{
      width: 100%;
      height: 100%;
      padding:0 10px;
      /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
        .el-scrollbar__bar{
          &.is-vertical{
            width:3px;
          }
        }
      }
      .el-scrollbar__view{
        .el-tree {
          /deep/.el-tree-node__content {
            height: 35px;
          }

          .custom-tree-node {
            width: calc(100% - 24px);
            height: 100%;
            box-sizing: border-box;
            padding-left: 18px;
            line-height: 35px;
            position: relative;

            &_icon {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              outline: none;
              .icon-color{
                color:#ebc547;
                &.blue{
                  color:#6f9bf4;
                }
              }
            }

            .custom-tree-node-label {
              width: calc(100% - 30px);
              display: inline-block;
              padding-left: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.node-label-table {
                width: calc(100% - 50px);
              }
            }

            .el-dropdown {
              position: absolute;
              right: 6px;
              top: 50%;
              z-index: 1;
              transform: translateY(-50%);

              i.el-icon-more {
                color: #7AA5F5;
                padding: 10px 5px;
              }
            }

            .custom-tree-node-button {
              display: block;
              width: 90px;
              background-color: #fff;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
              position: absolute;
              right: 0;
              top: 35px;
              z-index: 2;

              .el-button--text {
                display: block;
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                padding: 0;
                margin-left: 0;
                color:#606266;

                &:hover {
                  background-color: #F5F5F5;
                }
              }
            }
          }
        }
      }
      }
    }
}
</style>
